<template>
  <div class="g-page-container">
    <PageHeader title="线索跟进" />
    <div class="g-content-container">
      <SearchForm ref="search-form" @search="getList(1)" @export="getExport" />
      <TableList
        :scroll="{ x: '100%', y: 'calc(100vh - 400px)' }"
        :pagination="paginationMixin"
        :loading="loading"
        :data-source="dataSource"
        :row-selection="rowSelectionMixin"
        @change="handleTableChange"
        @number-click="handleNumberClick"
      />
    </div>
    <component
      :is="currentComponent"
      :visible.sync="visibleDrawer"
      :current-node="currentNode"
      :detail="detail"
      :plan-id="planId"
      :click-info="clickInfo"
      @fresh="getList"
      @value="visibleEdit = true"
    />
    <DrawerClueEdit
      :visible.sync="visibleEdit"
      :detail="detail"
      @value="handlerClick"
    />
  </div>
</template>

<script>
import {
  postleadsFollowList,
  getClueFollowDetails,
  postleadsBizSnapshoot,
} from '@/api/clue.js';
import { downloadFile } from '@/utils/index.js';
import SearchForm from './components/SearchForm.vue';
import mixinTable from '@/mixins/mixin-table.js';
import ButtonGroup from '@/components/button/ButtonGroup.vue';
import TableList from './components/TableList.vue';

import DrawerDetails from './components/DrawerDetails.vue';
import DrawerAudit from './components/DrawerAudit.vue';
import DrawerBusiness from './components/DrawerBusiness.vue';
import DrawerClueEdit from './components/DrawerClueEdit.vue';
export default {
  components: {
    SearchForm,
    ButtonGroup,
    TableList,
    DrawerDetails,
    DrawerClueEdit,
    DrawerAudit,
    DrawerBusiness,
  },
  mixins: [mixinTable],
  data() {
    return {
      visibleDrawer: false,
      visibleModal: false,
      visibleEdit: false,
      currentComponent: 'DrawerDetails',
      detail: {},
      clueId: undefined,
      leadsNo: undefined,
      asc: true,
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (to.query?.leadsNo) {
        vm.handleNumberClick(to.query);
      }
    });
  },
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    getSearchForm() {
      const form = this.$refs['search-form']?.form || {};
      const page = {
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        asc: this.asc,
        column: this.columnKey,
      };
      return { ...form, ...page };
    },
    // 获取列表信息
    async getList(val) {
      if (val) {
        this.paginationMixin.current = 1;
      }
      const form = this.getSearchForm();
      this.loading = true;
      const result = await postleadsFollowList(form).finally(
        () => (this.loading = false)
      );
      this.paginationMixin.total = result.data.data?.total;
      this.dataSource = result.data.data?.records;
    },
    // 线索编号弹框
    async handleNumberClick(record) {
      if (record.leadsStatus === '2') {
        this.currentComponent = 'DrawerAudit';
      } else if (
        record.businessAuditStatus === '2' &&
        record.leadsStatus === '0' &&
        record.transferStatus !== '1'
      ) {
        this.currentComponent = 'DrawerBusiness';
      } else if (
        record.leadsStatus === '0' &&
        record.businessAuditStatus !== '1' &&
        record.transferStatus !== '1'
      ) {
        this.currentComponent = 'DrawerDetails';
      } else {
        this.currentComponent = 'DrawerAudit';
      }
      const res = await getClueFollowDetails(record.leadsNo);
      this.detail = res.data.data;
      this.clueId = this.detail.id;
      this.leadsNo = this.detail.leadsNo;
      this.visibleDrawer = true;
    },
    async handlerClick(val) {
      const res = await getClueFollowDetails(val);
      this.detail = res.data.data;
      this.visibleDrawer = true;
    },
    // 导出
    async getExport() {
      const form = this.$refs['search-form']?.form || {};
      const res = await postleadsBizSnapshoot({
        asc: this.asc,
        column: this.columnKey,
        ...form,
      });
      await downloadFile(res.data, '线索信息.xlsx');
    },
    // 分页
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.asc = sorter.order === 'ascend' ? true : false;
      this.columnKey = sorter.columnKey;
      this.paginationMixin = page;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.table-container {
  padding: 10px 20px;
  height: calc(100vh - 160px);
  box-sizing: border-box;
}
</style>
